<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" name="" id="num1">
    <select name="" id="symbol">
        <option value="1">+</option>
        <option value="2">-</option>
        <option value="3">*</option>
        <option value="4">/</option>
    </select>
    <input type="text" name="" id="num2">
    <input type="button" name="" id="btn" value="=">
    <input type="text" name="" id="res">



    <script>

        // 思路：
        //    1 需要判断输入是否合法    if  
        //    2 输入正确才进行计算    switch


        // 注意：
        //    1 代码的先后顺序  --- 先获取对象，再写点击事件
        //    2 输入框的值是字符串
        //    3 select 在使用的时候   直接通过value可以获取 option的值 --- 注意：优先获取value,没有value才获取option标签中的值    <option value="1">+</option>


        // 1 拿对象
        var oNum1 = document.getElementById('num1') ;
        var oNum2 = document.getElementById('num2') ;
        var oBtn = document.getElementById('btn') ;
        var oSymbol = document.getElementById('symbol') ;
        var oRes = document.getElementById('res') ;

        // 2 点击事件
        oBtn.onclick = function () {
            // 获取输入框的值
            var n1 = oNum1.value ;
            var n2 = oNum2.value ;
            // 验证输入是否正确
            // 非空 和 合法
            // 其中如果有一个为空
            if(n1 === '' || n2 === '') {    // 此处逻辑也可以反向写，也就是写n1不等于空并且n2也不等于空
                alert('输入不能为空');
            } else {
                // 判断是不是数字  isNaN()
                if(isNaN(n1) || isNaN(n2)) {    // 此处也可以进行反向写 !isNaN(n1) 并且n2也是数字
                    alert('输入不是数字')
                } else {
                    // 进行计算 --- 根据选择的符号
                    var fuHao = oSymbol.value ;   // 注意 '1' -> +     '2' -> -   '3' -> *    '4' -> /
                    // 确定的值可以使用  switch 进行判断
                    switch(fuHao) {
                        case '1' : oRes.value = n1 * 1 + n2 * 1 ; break ;
                        case '2' : oRes.value = n1 - n2 ; break ;
                        case '3' : oRes.value = n1 * n2 ; break ;
                        case '4' : oRes.value = n1 / n2 ; 
                    }
                }
            }
        }


    </script>

    
</body>
</html>